<template>
  <!-- https://animate.style/ 抖动效果网址-->
  <!-- npm install animate.css  -->
  <button @click="flag = !flag">el-switch</button>

  <div class="parent">
    <!-- <transition enter-from-class="e-from" enter-active-class="e-active" enter-to-class="e-to" leave-from-class="l-from" leave-active-class="l-active" leave-to-class="l-to">
      <div v-if="flag" class="box"></div>
    </transition> -->
    <!--  :duration="5000" 时长 -->
    <transition leave-active-class="animate__animated animate__flash" enter-active-class="animate__animated animate__flash">
      <div v-if="flag" class="box"></div>
    </transition>
    <!-- <transition @before-enter="EnterFrom" @enter="EnterActive" @after-enter="EnterTo" @enter-cancelled="EnterCancel"
    @before-leave="LeaveFrom" @leave="Leave" @after-leave="LeaveTo" @leave-cancelled="LeaveCancel"
    >
      <div v-if="flag" class="box"></div>
    </transition> -->
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, defineAsyncComponent} from 'vue'
import 'animate.css'
const flag = ref<boolean>(true)
const EnterFrom = (el:Element) =>{
  console.log("进入之前");
  
}
const EnterActive = (el:Element, done:Function) =>{
  console.log("过度曲线");
  setTimeout(()=>{
    done()
  },3000)
}
const EnterTo = (el:Element) =>{
  console.log("过度完成");
  
}
const EnterCancel = (el:Element) =>{
  console.log("过度效果被打断");
  
}
const LeaveFrom = ()=>{
  console.log('离开之前');
  
}
const Leave = (el:Element, done:Function)=>{
  console.log('离开过度曲线');
  setTimeout(()=>{
    done();
  },5000)
}
const LeaveTo = ()=>{
  console.log('离开完成');
  
}
const LeaveCancel = ()=>{
  console.log('离开过度曲线被打断');
  
}
</script>

<style lang="less">
 html,body,#app{
   height: 100%;
   overflow: hidden;
 }
 .box{
  width: 200px;
  height: 200px;
  background: red;
 }
 .e-from{
  width: 0;
  height: 0;
  transform: rotate(360deg);

 }
 .e-active{
  transition: all 1.5s ease;
 }
 .e-to{
  width: 200px;
  height: 200px;
 }
 .l-from{
  width: 200px;
  height: 200px;
  transform: rotate(360deg);

 }
 .l-active{
  transition: all 5s ease;

 }
 .l-to{
  width: 0;
  height: 0;
 }


</style>